<template>
  <li class="card">
    <el-card shadow="hover" class="card_hover">
      <div class="card_heard claer">
        <div class="usre_data">
          <img src="../assets/img/logo.png" alt="" class="user" />
          <span>{{ lisData.t_name }}</span>
        </div>
        <h4 class="title">{{ lisData.p_title }}</h4>
      </div>
      <div class="card_main">{{ lisData.p_synopsis }}</div>
      <div class="card_foter">
        <!-- <el-popconfirm
          title="这篇内容确定删除吗？"
          @confirm="delCard(lisData.d_id)"
        > -->
        <el-button
          type="danger"
          icon="el-icon-message"
          circle
          class="btn"
          slot="reference"
          @click="openLeaveWordBtn"
        ></el-button>

        <!-- </el-popconfirm> -->
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="projectParticulars(lisData.id)"
          class="btn"
        ></el-button>
        <el-button
          :type="lisData.collect == 1 ? 'primary' : 'warning'"
          icon="el-icon-star-off"
          circle
          @click="collectBtn(lisData.id)"
          class="btn"
        ></el-button>
      </div>
    </el-card>
  </li>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      lisData: this.liData,
      openIndex: "",
    };
  },

  props: ["liData"],
  mounted() {},
  methods: {
    //收藏按钮
    collectBtn(id) {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      this.openIndex = this.$route.fullPath.split("/")[1];
      if (this.openIndex == "teacher") {
        if (this.lisData.collect == 1) {
          axios
            .post(`http://localhost:3000/teacher/collectProject`, {
              t_id: s_id,
              c_project: id,
              collect: 0,
            })
            .then((ret) => {
              if (ret.data.code == 1) {
                this.lisData.collect = 2;
                this.$message({
                  showClose: true,
                  message: "取消收藏",
                  type: "warning",
                });
                this.$forceUpdate();
              }
            });
        } else {
          axios
            .post(`http://localhost:3000/teacher/collectProject`, {
              t_id: s_id,
              c_project: id,
              collect: 1,
            })
            .then((ret) => {
              if (ret.data.code == 1) {
                this.lisData.collect = 1;
                this.$message({
                  showClose: true,
                  message: "收藏成功",
                  type: "success",
                });
                this.$forceUpdate();
              }
            });
        }
      } else if (this.lisData.collect == 1) {
        axios
          .post(`http://localhost:3000/student/collectProject`, {
            s_id,
            c_project: id,
            collect: 0,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.lisData.collect = 2;
              this.$message({
                showClose: true,
                message: "取消收藏",
                type: "warning",
              });
              this.$forceUpdate();
            }
          });
      } else {
        axios
          .post(`http://localhost:3000/student/collectProject`, {
            s_id,
            c_project: id,
            collect: 1,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.lisData.collect = 1;
              this.$message({
                showClose: true,
                message: "收藏成功",
                type: "success",
              });
              this.$forceUpdate();
            }
          });
      }
    },
    //项目详情按钮
    projectParticulars(id) {
      if (this.$route.fullPath.substring(1).split("/")[0] === "teacher") {
        this.$router.push({ path: "/teacher/tProject", query: { p_id: id } });
      } else {
        this.$router.push({ path: "/Project", query: { p_id: id } });
      }
    },
    //留言按钮
    openLeaveWordBtn() {
      this.$emit("update:visible", "true");
      this.$emit("update:leaveWordProjectId", this.lisData.id);
    },
  },
};
</script>

<style>
.card {
  width: 300px;
  height: 200px;
  float: left;
  margin: 10px;
}
.card_hover {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.card_heard {
  width: 100%;
  height: 35%;
  box-sizing: border-box;
  border-bottom: 2px solid #333;
}
.usre_data {
  width: 70px;
  float: left;
  padding: 0 10px;
  box-sizing: border-box;
}
.user {
  width: 40px;
  height: 40px;
}
.title {
  width: 180px;
  margin-left: 20px;
  float: left;
  font: 20px/50px "";
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card_main {
  width: 100%;
  height: 40%;
  padding: 5px 10px;
  margin: 5px 0;
  overflow: hidden;
  text-indent: 2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 2px solid #333;
}
.card_foter {
  width: 100%;
  height: 20%;
  box-sizing: border-box;
}
.btn {
  margin-left: 10px;
  float: right;
}
.el-card__body {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
